<template>
  <div class="container">
    <div class="tabNav">
      <div class="tabNavItem" data-index="1" @click="tabChange">
        <span class="tabNavText" :class="[isActive == 1 ? 'active' : '']"
          >优惠券</span
        >
      </div>
      <div class="tabNavItem" data-index="2" @click="tabChange">
        <span class="tabNavText" :class="[isActive == 2 ? 'active' : '']"
          >卡包</span
        >
      </div>
    </div>
    <div class="discount">
      <div v-if="isActive == 2">
        <div class="couponCard" v-for="(item, index) in cardList" :key="index">
          <img src="../../images/discountBg.png" v-if="item.status === 0" />
          <img
            src="https://imgs.xlgxapp.com/app_imgs/app_imgs/refunding%403x.png"
            v-if="item.status === 1"
          />
          <img
            src="https://imgs.xlgxapp.com/app_imgs/expire.png"
            v-if="item.status === 2"
          />
          <img
            src="https://imgs.xlgxapp.com/app_imgs/used.png"
            v-if="item.status === 4"
          />
          <div class="descArea">
            <div class="couponTitle">
              <span>{{ item.title }}</span>
            </div>
            <div class="couponDesc">
              <span>{{ item.description }}</span>
            </div>
            <div style="margin-bottom: 0.2rem">
              <span>{{ item.validDateText }}</span>
            </div>
            <div>
              <span>{{ item.regionLimitText || "" }}</span>
              <span v-if="item.sourceLimit == 1">
                仅限小遛共享<span style="color: #ff6e2a">APP</span>使用</span
              >
              <span v-if="item.sourceLimit == 2">
                仅限小遛共享<span style="color: #ff6e2a">小程序</span>使用</span
              >
            </div>
          </div>
        </div>
      </div>
      <!--  折扣 -->
      <div v-for="(item, index) in list" :key="index" v-if="isActive == 1">
        <div
          class="cardItem"
          v-if="item.coupontype == 1 && item.isuse == 0 && !item.isExpire"
        >
          <div class="topArea">
            <div class="leftArea">
              <span class="cardTitle">出行折扣券</span>
              <span class="cardDate">有效期至 {{ item.valid }}</span>
              <span class="cardDate" v-if="item.upperLimit"
                >最高抵{{ item.upperLimit }}元</span
              >
              <span class="cardDate" v-if="item.lowerLimit"
                >{{ item.lowerLimit }}元及以上订单使用</span
              >
              <span class="cardDate" v-if="item.payMethodLimit == '1'">
                <span>【限云闪付使用】</span>
                <span v-if="item.lowerLimit"
                  >{{ item.lowerLimit }}元及以上订单使用</span
                >
              </span>
              <span class="cardDate">{{ item.regionLimitTitle || "" }}</span>
            </div>
            <div class="rightArea">
              <span class="amount">{{ item.money }}</span>
              <span class="unit">折</span>
            </div>
          </div>
          <div class="bottomArea">
            <div>
              <span>仅用于单笔订单支付</span>
              <span v-if="item.sourceLimit == 1">/仅限小遛共享APP使用</span>
              <span v-if="item.sourceLimit == 2">/仅限小遛共享小程序使用</span>
            </div>
          </div>
        </div>
        <!--  代金券 -->
        <div
          class="cardItem"
          v-if="item.coupontype == 0 && !item.isExpire && item.isuse == 0"
        >
          <div class="topArea">
            <div class="leftArea">
              <span class="cardTitle">出行代金券</span>
              <span class="cardDate">有效期至 {{ item.valid }}</span>
              <span class="cardDate" v-if="item.upperLimit"
                >最高抵{{ item.upperLimit }}元</span
              >
              <span class="cardDate" v-if="item.lowerLimit"
                >{{ item.lowerLimit }}元及以上订单使用</span
              >
              <span class="cardDate" v-if="item.payMethodLimit == '1'">
                <span>【限云闪付使用】</span>
                <span v-if="item.lowerLimit"
                  >{{ item.lowerLimit }}元及以上订单使用</span
                >
              </span>
              <span class="cardDate">{{ item.regionLimitTitle || "" }}</span>
            </div>
            <div class="rightArea">
              <span class="amount">{{ item.money }}</span>
              <span class="unit">元</span>
            </div>
          </div>
          <div class="bottomArea">
            <div>
              <span>仅用于单笔订单支付</span>
              <span v-if="item.sourceLimit == 1">/仅限小遛共享APP使用</span>
              <span v-if="item.sourceLimit == 2">/仅限小遛共享小程序使用</span>
            </div>
          </div>
        </div>
        <!--  代金券 过期 -->
        <div
          class="cardItem"
          v-if="item.coupontype == 0 && item.isuse == 0 && item.isExpire"
        >
          <div class="topArea">
            <div class="leftArea">
              <span class="cardTitle disabledColor">出行代金券</span>
              <span class="cardDate disabledColor"
                >有效期至 {{ item.valid }}</span
              >
              <span class="cardDate disabledColor" v-if="item.upperLimit"
                >最高抵{{ item.upperLimit }}元</span
              >
              <span class="cardDate disabledColor" v-if="item.lowerLimit"
                >{{ item.lowerLimit }}元及以上订单使用</span
              >
              <span
                class="cardDate disabledColor"
                v-if="item.payMethodLimit == '1'"
              >
                <span>【限云闪付使用】</span>
                <span v-if="item.lowerLimit"
                  >{{ item.lowerLimit }}元及以上订单使用</span
                >
              </span>
              <span class="cardDate disabledColor">{{
                item.regionLimitTitle || ""
              }}</span>
            </div>
            <div class="rightArea">
              <span class="amount disabledColor">{{ item.money }}</span>
              <span class="unit disabledColor">元</span>
            </div>
          </div>
          <div class="bottomArea">
            <div class="disabledColor">
              <span>仅用于单笔订单支付</span>
              <span v-if="item.sourceLimit == 1">/仅限小遛共享APP使用</span>
              <span v-if="item.sourceLimit == 2">/仅限小遛共享小程序使用</span>
            </div>
            <div class="badge">已过期</div>
          </div>
        </div>
        <!--  折扣券 过期 -->
        <div
          class="cardItem"
          v-if="item.coupontype == 1 && item.isuse == 0 && item.isExpire"
        >
          <div class="topArea">
            <div class="leftArea">
              <span class="cardTitle disabledColor">出行折扣券</span>
              <span class="cardDate disabledColor"
                >有效期至 {{ item.valid }}</span
              >
              <span class="cardDate disabledColor" v-if="item.upperLimit"
                >最高抵{{ item.upperLimit }}元</span
              >
              <span class="cardDate disabledColor" v-if="item.lowerLimit"
                >{{ item.lowerLimit }}元及以上订单使用</span
              >
              <span
                class="cardDate disabledColor"
                v-if="item.payMethodLimit == '1'"
              >
                <span>【限云闪付使用】</span>
                <span v-if="item.lowerLimit"
                  >{{ item.lowerLimit }}元及以上订单使用</span
                >
              </span>
              <span class="cardDate disabledColor">{{
                item.regionLimitTitle || ""
              }}</span>
            </div>
            <div class="rightArea">
              <span class="amount disabledColor">{{ item.money }}</span>
              <span class="unit disabledColor">折</span>
            </div>
          </div>
          <div class="bottomArea">
            <div class="disabledColor">
              <span>仅用于单笔订单支付</span>
              <span v-if="item.sourceLimit == 1">/仅限小遛共享APP使用</span>
              <span v-if="item.sourceLimit == 2">/仅限小遛共享小程序使用</span>
            </div>
            <div class="badge">已过期</div>
          </div>
        </div>
        <!--  代金券 已使用 -->
        <div class="cardItem" v-if="item.coupontype == 0 && item.isuse == 1">
          <div class="topArea">
            <div class="leftArea">
              <span class="cardTitle disabledColor">出行代金券</span>
              <span class="cardDate disabledColor"
                >有效期至 {{ item.valid }}</span
              >
              <span class="cardDate disabledColor" v-if="item.upperLimit"
                >最高抵{{ item.upperLimit }}元</span
              >
              <span class="cardDate disabledColor" v-if="item.lowerLimit"
                >{{ item.lowerLimit }}元及以上订单使用</span
              >
              <span
                class="cardDate disabledColor"
                v-if="item.payMethodLimit == '1'"
              >
                <span>【限云闪付使用】</span>
                <span v-if="item.lowerLimit"
                  >{{ item.lowerLimit }}元及以上订单使用</span
                >
              </span>
              <span class="cardDate disabledColor">{{
                item.regionLimitTitle || ""
              }}</span>
            </div>
            <div class="rightArea">
              <span class="amount disabledColor">{{ item.money }}</span>
              <span class="unit disabledColor">元</span>
            </div>
          </div>
          <div class="bottomArea">
            <div class="disabledColor">
              <span>仅用于单笔订单支付</span>
              <span v-if="item.sourceLimit == 1">/仅限小遛共享APP使用</span>
              <span v-if="item.sourceLimit == 2">/仅限小遛共享小程序使用</span>
            </div>
            <div class="badge">已使用</div>
          </div>
        </div>
        <!--  折扣券 已使用 -->
        <div class="cardItem" v-if="item.coupontype == 1 && item.isuse == 1">
          <div class="topArea">
            <div class="leftArea">
              <span class="cardTitle disabledColor">出行折扣券</span>
              <span class="cardDate disabledColor"
                >有效期至 {{ item.valid }}</span
              >
              <span class="cardDate disabledColor" v-if="item.upperLimit"
                >最高抵{{ item.upperLimit }}元</span
              >
              <span class="cardDate disabledColor" v-if="item.lowerLimit"
                >{{ item.lowerLimit }}元及以上订单使用</span
              >
              <span
                class="cardDate disabledColor"
                v-if="item.payMethodLimit == '1'"
              >
                <span>【限云闪付使用】</span>
                <span v-if="item.lowerLimit"
                  >{{ item.lowerLimit }}元及以上订单使用</span
                >
              </span>
              <span class="cardDate disabledColor">{{
                item.regionLimitTitle || ""
              }}</span>
            </div>
            <div class="rightArea">
              <span class="amount disabledColor">{{ item.money }}</span>
              <span class="unit disabledColor">折</span>
            </div>
          </div>
          <div class="bottomArea">
            <div class="disabledColor">
              <span>仅用于单笔订单支付</span>
              <span v-if="item.sourceLimit == 1">/仅限小遛共享APP使用</span>
              <span v-if="item.sourceLimit == 2">/仅限小遛共享小程序使用</span>
            </div>
            <div class="badge">已使用</div>
          </div>
        </div>
      </div>
      <div
        class="tip"
        v-if="isActive == 1 || isActive == 2"
        style="padding-bottom: 4rem; padding-top: 0.4rem"
      >
        小遛已滑到底部啦,主人
      </div>
      <div class="exchange">
        <div class="exchangeButton" @click="exchange" :disabled="disabled">
          兑换卡券
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import newDiscount from "./newDiscount";

export default {
  mixins: [newDiscount],
  data() {
    return {};
  },
};
</script>
<style scoped lang="stylus">
@import './newDiscount.styl';
</style>
